<template>
  <div class="header">
    <div class="header_wrap">
      <div class="header_right">
        <div v-if="userStore.user_id" class="user">
          <span>欢迎 {{ userStore.userName }}</span>
          <div class="logout" @click="logout">退出登录</div>
        </div>
        <div v-else class="login">
          <RouterLink to="/login">登录</RouterLink>
          <div>|</div>
          <RouterLink :to="{ name: 'login', query: { flag: 2 } }"
            >注册</RouterLink
          >
        </div>
        <div @click="goOrder">我的订单</div>
        <div @click="goCollect">我的收藏</div>
        <div class="shopping" @click="goShopping">
          <span class="iconfont icon-gouwuche"></span>购物车({{
            shoppingCartStore.shoppingCartData.length
          }})
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
export default {
  name: "headHead",
};
</script>

<script lang="ts" setup>
import { useRouter } from "vue-router";
import { useAppStore } from "@/store/user";
import { useShoppingCartStore } from "../store/shoppingCart";
const shoppingCartStore = useShoppingCartStore();
const userStore = useAppStore();
const router = useRouter();
const goOrder = () => {
  router.push("/order");
};
const goCollect = () => {
  router.push("/collect");
};
const goShopping = () => {
  router.push("/shopping");
};
const logout = () => {
  localStorage.setItem("user_id", "");
  localStorage.setItem("userName", "");
  userStore.userName = "";
  userStore.user_id = 0;
};
</script>

<style scoped>
.user {
  position: relative;
}
.logout {
  position: absolute;
  left: 0;
  top: 50px;
  height: 50px;
  width: 100%;
  background-color: #333;
  text-align: center;
  line-height: 50px;
  color: #aaa;
  border-radius: 0 0 5px 5px;
  border-top: 1px solid lightgreen;
  cursor: pointer;
  display: none;
}
.logout:active {
  background-color: #000;
}
.user:hover .logout {
  display: block;
}
.header {
  width: 100%;
  height: 50px;
  background-color: #333;
  min-width: 1200px;
}
.header_wrap {
  width: 1200px;
  margin: 0 auto;
  height: 50px;
  display: flex;
  justify-content: flex-end;
}
.header_right {
  display: flex;
}
.header_right > div {
  height: 50px;
  line-height: 50px;
  text-align: center;
  padding: 0 20px;
  color: #aaa;
  font-size: 14px;
}
.shopping:hover {
  background-color: #fff;
  color: rgb(225, 88, 2);
}
.login {
  display: flex;
  justify-content: space-between;
}
.login div {
  width: 30px;
}
</style>
